<template>
    <div class="dbant-editor-box">

        <div class="sql-query">
            <div class="dbant-navbar"> <!-- 左侧导航条 -->
                <dbant-navbar direction="vertical" :to="$refs.mrl" ref="mnl" :spliter="true">
                    <dbant-navbar-item key="1" title="数据库" icon="CATALOG">
                        <magic-resizer :max="750" :min="270" direction='x'>
                           <query-resource v-model:queryTabs="queryTabs"></query-resource>
                        </magic-resizer>
                    </dbant-navbar-item>
                </dbant-navbar>
            </div>
            <div class="dbant-editor">
                <div>
                    <el-row :gutter="10">
                        <el-col :span="1.5">
                            <el-button icon="el-icon-videoPlay" circle size="small" :disabled="!connectionId"
                                @click="sqlQueryHandle" />
                        </el-col>
                        <el-col :span="1.5">
                            <el-button icon="el-icon-magicStick" circle size="small" :disabled="!connectionId" />
                        </el-col>
                        <el-col :span="1.5">
                            <el-button icon="el-icon-folderAdd" circle size="small" />
                        </el-col>
                        <el-col :span="1.5">
                            <el-button icon="el-icon-message" circle size="small" />
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="1.5">
                            <el-select v-model="connectionId" class="m-2" placeholder="选择连接" size="small" clearable
                                @change="((val) => { getCatalogList(val) })">
                                <el-option v-for="item in connList" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-col>
                        <el-col :span="1.5">
                            <el-select v-model="catalogName" class="m-2" placeholder="选择数据库" size="small" clearable>
                                <el-option v-for="item in catalogList" :key="item.name" :label="item.name"
                                    :value="item.name" />
                            </el-select>
                        </el-col>
                    </el-row>
                </div>
                <div class="script-editor">

                    <div class="magic-monaco-editor-wrapper">
                        <monaco-editor ref="sqlEditor" read-only="false" @editor-mounted="editorMounted"
                            :on-input-field="onInputField" v-model:dbs="dbs" />
                    </div>
                </div>

                <div class="dbant-toolbar">
                    <dbant-navbar direction="horizontal" ref="navbar" class="magic-navbar" :spliter="true">
                        <dbant-navbar-item key="1" title="底部测试" icon="query">
                            <magic-resizer direction="y" :max="700" :min="150" :value="250">
                                <div style="width: 100%;">asdjflkajsdf</div>
                            </magic-resizer>
                        </dbant-navbar-item>
                    </dbant-navbar>
                </div>

                <!-- <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="用户管理" name="first">
                        <div class="editor-panel" style="height: 100%;">
                            <el-row :gutter="10">
                                <el-col :span="1.5">
                                    <el-button icon="el-icon-videoPlay" circle size="small" :disabled="!connectionId"
                                        @click="sqlQueryHandle" />
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button icon="el-icon-magicStick" circle size="small" :disabled="!connectionId" />
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button icon="el-icon-folderAdd" circle size="small" />
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button icon="el-icon-message" circle size="small" />
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="1.5">
                                    <el-select v-model="connectionId" class="m-2" placeholder="选择连接" size="small" clearable
                                        @change="((val) => { getCatalogList(val) })">
                                        <el-option v-for="item in connList" :key="item.id" :label="item.name"
                                            :value="item.id" />
                                    </el-select>
                                </el-col>
                                <el-col :span="1.5">
                                    <el-select v-model="catalogName" class="m-2" placeholder="选择数据库" size="small" clearable>
                                        <el-option v-for="item in catalogList" :key="item.name" :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-col>

                            </el-row>
                            <div class="sql-editor-box">
                                <monaco-editor ref="sqlEditor" />
                            </div>
                            <div class="dbant-toolbar">
                    <dbant-navbar :reverse="true" direction="horizontal" :spliter="true">
                        <dbant-navbar-item key="1" title="测试底部" icon="query">
                            <magic-resizer direction="y" :max="700" :min="250" :value="250">
                                <div class="magic-toolbar-header">
                                    <label>测试仪</label>
                                    <div class="magic-toolbar-header-buttons">
                                        <magic-icon icon="minimize" size="14px" title="隐藏" @click="navbar.select(-1)" />
                                        <magic-icon icon="close" title="关闭" @click="closeTab(toolbar)" />
                                    </div>
                                </div>
                                <div>askldjflaksjdlkf</div>
                            </magic-resizer>
                        </dbant-navbar-item>

                    </dbant-navbar>
                </div>
                        </div>
                    </el-tab-pane>
                </el-tabs> -->

            </div>
            <div class="dbant-navbar-right">
                <dbant-navbar :reverse="true" :default-select="-1" direction="vertical" :spliter="true">
                    <dbant-navbar-item key="1" title="asldkfj" icon="query">
                        <div>askldjflaksjdlkf</div>
                    </dbant-navbar-item>
                    <dbant-navbar-item key="2" title="asldkfj222" icon="query">
                        <div>askldjflaksjdlkf</div>
                    </dbant-navbar-item>
                </dbant-navbar>
            </div>
        </div>

    </div>
</template>

<script>
import QueryResource from "./components/query-resource.vue";
import QueryMain from "./components/query-main.vue";
import MagicResizer from "./components/magic-resizer.vue"
import MonacoEditor from '../../components/monacoEditor.vue'

import DbantLoading from "../../components/loading/dbant-loading.vue"
import { onMounted } from "vue";
import Tabs from "../../components/tags.vue"
export default {
    components: {
        MonacoEditor,
        QueryResource,
        QueryMain,
        MagicResizer,

        DbantLoading
    },
    data() {
        return {
            activeName: "first",
            selectTab: '',
            openedScripts: [],
             loading :true
        }
    },
    created
        () {
        this.openedScripts.push({
            item: {
                name: "测试"
            }

        })
    }
}
</script>
<style lang="scss"   scoped>
.sql-query {
    display: flex;
    width: 100%;
}

.sql-query .dbant-navbar {
    height: 100%;
}

.sql-query .dbant-navbar-right {
    // position: absolute;
    flex-direction: row-reverse;
    // width: 30px;
    // right: 0;
    height: 100%;
}

.sql-query .dbant-editor {

    height: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;

    ul {
        margin: 0px 0px
    }


    :deep(.el-tabs) {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;

        .el-tabs__content {
            flex: 1;

        }

        .el-tab-pane {
            height: 100%;
            overflow: auto;
        }

    }

    .dbant-toolbar {

        flex-direction: column-reverse;
        width: 100%;
    }

}


.dbant-editor .script-editor {
    position: relative;
    flex: 1;
}

.script-editor .magic-monaco-editor-wrapper {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
}


.dbant-editor-box {
    display: flex;
    height: 100%;
}

.dbant-toolbar .magic-navbar {
    display: flex;
    flex-direction: column-reverse;
    flex: 1;
    ul {
        margin: 0px 0px
    }
}
</style>